<script setup lang="ts">
import {  type IconifyIcon } from '@iconify/vue';
import {computed, useAttrs, h } from "vue";
import WIcon from "./w-icon.vue";

defineOptions({
  name: 'button-icon',
  inheritAttrs: false,
})

const props = withDefaults(defineProps<{
  border?: boolean
  icon: IconifyIcon|string
  name?: string
  size?: string|number
  color?: string
}>(),{
  border: true,
  size: 20,
})

const attrs = useAttrs()
const iconNode = h(WIcon,{
  icon: props.icon,
  size: props.size,
})
</script>

<template>
  <a-button class="button-icon" :class="{'border-0': !border}" v-bind="attrs" :border="false" :icon="iconNode" />
</template>

<style lang="scss" scoped>
.button-icon{
  display: inline-flex;
  box-sizing: border-box;
  padding: 4px;
  justify-content: center;
  align-items: center;
}
</style>